<template>
  <!-- 角色审核页 -->
  <div class="permission-roles-container">
    <Row style="padding-bottom:20px;background:white;padding-left:30px;padding-top:20px">
      <Col span="1">
        <el-button type="primary" style="" icon="el-icon-circle-plus-outline" size="small" @click="addUser()">新增</el-button>
      </Col>
    </Row>
    <div style="height:10px"></div>
    <div style="background:white;padding:10px">
      <Table stripe :columns="columns" :data="verifyData">
        <template slot="action" slot-scope="{ row, index }">
          <span>
            <Button v-if="(row.roleIndex!=1)&&(row.roleIndex!=2)&&(row.roleIndex!=3)" type="primary" size="small" style="margin-right: 5px" @click="showVenify(row, index)">修改</Button>
            <Button v-if="(row.roleIndex!=1)&&(row.roleIndex!=2)&&(row.roleIndex!=3)" type="error" size="small" style="margin-right: 5px" @click="deleteDate(row, index)">删除</Button>
          </span>
        </template>
      </Table>
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="userCount"
          @current-change="changepageNum"
          @size-change="changePageSize"
        />
      </el-row>
    </div>
    <!-- 申请角色详细信息弹框 -->
    <Modal
      v-model="userDialog"
      title="角色管理"
      :width="600"
      :height="600"
      :closable="false"
      :mask-closable="false"
    >
      <Form ref="approveForm" :model="approveForm" :label-width="100" class="labelStrong" :rules="approveRules">
        <FormItem label="角色名称" prop="roleName">
          <Input v-model="approveForm.roleName" type="text" placeholder="请输入角色名" />
        </FormItem>
        <FormItem label="角色状态">
          <RadioGroup v-model="approveForm.roleStatus">
            <Radio v-for="item in roleStatusList" :key="item.value" :label="item.value">
              <span>{{ item.label }}</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="approveForm.remark" type="textarea" :rows="4" placeholder="请输入备注" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleReset()">取消</Button>
        <Button type="primary" @click="approveConfirm()">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getRoleList, addRole, updateRole, deleteRole } from '@/api/user'
export default {
  components: {},
  data() {
    return {
      isEdit: false, // 编辑角色
      roleIndex: '', // 角色编号
      columns: // 表格数据
         [{
           title: '序号',
           key: 'index'
         },
         {
           title: '角色名称',
           key: 'roleName'
         },
         {
           title: '关联人数',
           key: 'roleUserNum'
         },
         {
           title: '角色状态',
           key: 'roleStatus',
           render: (h, params) => {
             if (params.row.roleStatus === '启用') {
               return h('span', {
                 'style': {
                   'color': 'rgba(109, 212, 0, 1)'
                 }
               }, '• ' + params.row.roleStatus)
             } else {
               return h('span', {
                 'style': {
                   'color': 'rgba(232, 82, 91, 1)'
                 }
               }, '• ' + params.row.roleStatus)
             }
           }
         },
         {
           title: '创建时间',
           key: 'createTimeStr'

         },
         {
           title: '更新时间',
           key: 'updateTimeStr'

         },
         {
           title: '登录次数',
           key: 'roleLoginNum'

         },
         /* {
           title: '状态',
           key: 'onlineStatus',
           render: (h, params) => {
             if (params.row.onlineStatus === '启用') {
               return h('span', {
                 'style': {
                   'color': 'rgba(109, 212, 0, 1)'
                 }
               }, '• ' + params.row.onlineStatus)
             } else {
               return h('span', {
                 'style': {
                   'color': 'rgba(232, 82, 91, 1)'
                 }
               }, '• ' + params.row.onlineStatus)
             }
           }

         }, */
         {
           title: '描述',
           key: 'remark'

         },
         {
           title: '操作',
           slot: 'action',
           width: 150,
           align: 'center'
         }
         ],

      verifyData: [], // 表格数据

      roleStatusList: [{ // 角色状态
        value: 'use',
        label: '启用'
      },
      {
        value: 'unuse',
        label: '停用'
      }],
      pageNum: 1, // 当前页
      pageSize: 10, // 每一页数量
      userCount: 0, // 总数
      approveForm: { // 表单数据
        roleName: '', // 角色名
        roleStatus: 'use', // 角色状态
        remark: ''// 备注

      },
      userDialog: false,
      endTime: '',
      rowIndex: '',
      approveRules: {
        roleName: [{ required: true, message: '角色名必填', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getRoleList()// 角色列表
  },
  methods: {
    /**
     * @description: 页面初始化
     * @description: 获取角色列表
     * @return {*}
     */
    getRoleList() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        roleName: ''
      }
      this.getAllusers(data)
    },
    /**
     * @description: 切换页面
     * @description: 获取角色列表
     * @return {*}
     */
    changepageNum(val) { // 切换页码时
      this.pageNum = val
      const data = {
        pageNum: val,
        pageSize: this.pageSize,
        roleName: ''
      }
      this.getAllusers(data)
    },
    /**
     * @description: 改变页面容量
     * @description: 获取角色列表
     * @return {*}
     */
    changePageSize(val) { // 切换页码时
      this.pageSize = val
      const data = {
        pageNum: val,
        pageSize: this.pageSize,
        roleName: ''
      }
      this.getAllusers(data)
    },
    /**
     * @description: 多方式触发
     * @description: 获取角色列表
     * @return {*}
     */
    getAllusers(params) {
      getRoleList(params).then(res => {
        if (res.code === 200) {
          // const array = []
          this.verifyData = res.data.result
          this.userCount = res.data.totalNum
          this.verifyData.forEach((item, index) => {
            item.index = (this.pageNum - 1) * this.pageSize + index + 1
            item.onlineStatus = item.roleStatus = item.roleStatus === 'use' ? '启用' : '停用'
          })
        }
      })
    },
    /**
     * @description: 添加角色
     * @return {*}
     */
    addUser() {
      this.userDialog = true
    },
    /**
     * @description: 角色编辑
     * @return {*}
     */
    showVenify(item, i) {
      this.userDialog = true
      this.approveForm.roleName = item.roleName
      this.approveForm.roleStatus = item.roleStatus === '启用' ? 'use' : 'unuse'
      this.approveForm.remark = item.remark
      this.roleIndex = item.roleIndex
      this.isEdit = true
    },
    /**
     * @description: 提交数据
     * @description: 点击确认触发
     * @return {*}
     */
    approveConfirm() {
      const that = this
      this.$refs['approveForm'].validate((valid) => {
        if (valid) {
          if (that.isEdit === false) {
            const data = {
              roleName: that.approveForm.roleName,
              roleStatus: that.approveForm.roleStatus,
              remark: that.approveForm.remark
            }
            addRole(data).then(res => {
              if (res.code === 200) {
                this.$Message.success('添加成功!')
                const data = {
                  pageNum: 1,
                  pageSize: that.pageSize,
                  roleName: ''
                }
                that.getAllusers(data)
                that.handleReset()
              } else {
                this.$Message.error(res.message)
              }
            })
          } else {
            const editData =
                            {
                              roleIndex: that.roleIndex,
                              roleName: that.approveForm.roleName,
                              roleStatus: that.approveForm.roleStatus,
                              remark: that.approveForm.remark
                            }
            updateRole(editData).then(res => {
              if (res.code === 200) {
                this.$Message.success('修改成功!')
                const data = {
                  pageNum: that.pageNum,
                  pageSize: that.pageSize,
                  roleName: ''
                }
                that.isEdit = false
                that.roleIndex = ''
                that.handleReset()
                that.getAllusers(data)
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        }
      })
    },
    /**
     * @description: 删除角色
     * @description: 点击删除触发
     * @return {*}
     */
    deleteDate(item, i) {
      const data = {
        roleIndex: item.roleIndex
      }
      const that = this
      this.$Modal.confirm({
        title: '提示',
        content: '您确认删除该角色吗？',
        okText: '确定',
        cancelText: '取消',
        closable: false,
        onOk() {
          deleteRole(data).then(res => {
            if (res.code === 200) {
              debugger
              this.$Message.success('角色删除成功!')
              that.verifyData.splice(i, 1)
              const tableData = {
                pageNum: that.pageNum,
                pageSize: that.pageSize,
                roleName: ''
              }
              that.getAllusers(tableData)
              const currentCount = that.userCount - 1
              if (currentCount % 10 === 0) { // 所胜所有数据为10的倍数时
                that.pageNum = that.pageNum === 1 ? 1 : that.pageNum - 1
                const tableData2 = {
                  pageNum: that.pageNum,
                  pageSize: that.pageSize,
                  roleName: ''
                }
                that.getAllusers(tableData2)
              }
            } else {
              this.$Message.error('角色删除失败!')
            }
          })
        },
        onCancel() {
          console.log(1)
        }
      })
    },
    /**
     * @description: 重置表单
     * @description: 点击取消触发
     * @return {*}
     */
    handleReset() {
      this.$refs['approveForm'].resetFields()
      this.isEdit =
            this.userDialog = false
      this.approveForm = {
        roleName: '',
        roleStatus: 'use',
        remark: ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.permission-roles-container {
  height: auto;
    padding: 16px;
}
</style>
<style lang="less" >
.permission-roles-container {
 .ivu-table td, .ivu-table th {
     border-bottom: 0px solid #e8eaec !important;
}
    .ivu-table:before{content:'';width:100%;height:0px;position:absolute;left:0;bottom:0;z-index:1}
    .ivu-table:after{content:'';width:0px;height:100%;position:absolute;top:0;right:0;z-index:3}
}
</style>
